<!--/*-->
<!--* Datart-->
<!--* <p>-->
<!--  * Copyright 2021-->
<!--  * <p>-->
<!--  * Licensed under the Apache License, Version 2.0 (the "License");-->
<!--  * you may not use this file except in compliance with the License.-->
<!--  * You may obtain a copy of the License at-->
<!--  * <p>-->
<!--  * http://www.apache.org/licenses/LICENSE-2.0-->
<!--  * <p>-->
<!--  * Unless required by applicable law or agreed to in writing, software-->
<!--  * distributed under the License is distributed on an "AS IS" BASIS,-->
<!--  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.-->
<!--  * See the License for the specific language governing permissions and-->
<!--  * limitations under the License.-->
<!--  */-->

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="format-detection" content="telephone=no" />
  <meta content="email=no" name="format-detection" />
  <title>Join</title>
  <style>
    html,body,div,header,h2,article,button,p {
      margin: 0; padding: 0;
    }
    html,body{
      height: 100%;
      width: 100%;
    }
    .container {
      width: 100%;
      height: 100%;
      background-color: #EAEDF1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .wrapper {
      margin: 48px auto;
      width: 420px;
      display: flex;
      flex-direction: column;
    }
    header{
      flex:0;
      background-color: #1B98E0;
      border-radius: 2px 2px 0 0;
      line-height: 56px;
      height: 56px;
      color: #fff;
    }
    article {
	  display: flex;
	  flex-direction: column;
      flex: 1;
      background-color: #fff;
      border-radius: 0 0 2px 2px;
      padding: 32px;
    }
    .hi {
      text-align: left;
    }
    .title {
      text-align: center;
    }
    .commonTitle {
      color: #444444;
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 20px;
    }
    .sure{
      font-size: 16px;
      outline: none;
      display: inline-block;
      margin: 0 auto 16px auto;
      padding: 8px 48px;
      border-radius: 4px 4px;
      background-color: #1B98E0;
      color: #fff;
      cursor: pointer;
      text-decoration:none;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      text-align: center;
    }
    .detail {
      font-size: 12px;
      color: rgba(0,0,0,.59);
      text-align: center;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="wrapper">
    <header class="title">
      <h2><span th:text="#{message.user.invite.mail.header}"></span></h2>
    </header>
    <article>
      <div class="hi commonTitle">Hi, <span th:text="${username}">username</span></div>
      <div class="title"><span th:text="| ${inviter} #{message.user.invite.mail.invite},${orgName}|">greeting</span></div>
      <a class="sure" th:text="#{message.user.invite.mail.confirm}"  th:href="@{{host}(invite_token=${token},host=${host})}"></a>
      <p class="detail"><span th:text="#{message.user.invite.mail.tips}"></span></p>
    </article>
  </div>
</div>
</body>
</html>
